<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :background="{ background: '#fff' }"
      :border-bottom="false"
      title="确认申领"
    ></u-navbar>

    <view class="confirmOrder-wrap">
      <view class="address">
        <image class="methodIcon" src="/static/images/icon-psfs.png" mode="scaleToFill" />
        <view class="center">
          <view class="item-top">
            <view class="name">配送方式</view>
          </view>
          <view class="item-bottom"> 请选择配送方式 </view>
        </view>

        <u-radio-group
          v-model="deliveryType"
          @change="deliveryTypeChange"
          active-color="#D5AE87"
        >
          <u-radio :name="0">快递寄送</u-radio>
          <u-radio :name="1">门店自提</u-radio>
        </u-radio-group>
      </view>

      <view v-if="deliveryType === 0" class="address mt30" @click="handleChooseAddr">
        <image
          class="addressIcon"
          src="/static/images/icon-ztmd.png"
          mode="scaleToFill"
        />
        <view class="center">
          <view class="item-top">
            <view v-if="addressInfo.isDefault" class="tag">默认</view>
            <view class="name">{{ addressInfo.name || '添加收货地址' }}</view>
            <view class="phone">{{ addressInfo.phone || '' }}</view>
          </view>
          <view class="item-bottom">
            {{ addressInfo.province || '当前还未添加任何收货地址，请添加' }}
            {{ addressInfo.city ? addressInfo.city : '' }}
            {{ addressInfo.address ? addressInfo.address : '' }}
          </view>
        </view>
        <u-icon name="arrow-right" :size="40" color="#CCCCCC"></u-icon>
      </view>

      <template v-else>
        <view class="address mt30" @click="showPopup = true">
          <image
            class="addressIcon"
            src="https://file.hjsfpay.com/image/20230613/icon-qhr.png"
            mode="scaleToFill"
          />
          <view class="center">
            <view class="item-top">
              <view class="name">
                {{ pickerModel.name || '取货人联系方式' }}
              </view>
            </view>
            <view class="item-bottom">
              {{ pickerModel.phone || '当前还未添加任何取货人联系方式，请添加' }}
            </view>
          </view>
          <u-icon name="arrow-right" :size="40" color="#CCCCCC"></u-icon>
        </view>

        <view class="address mt30" @click="handleChooseStore">
          <image
            class="addressIcon"
            src="https://file.hjsfpay.com/image/20230613/icon-ztmd.png"
            mode="scaleToFill"
          />
          <view class="center">
            <view class="item-top">
              <!-- <view v-if="storeInfo.isDefault" class="tag">默认</view> -->
              <view class="name">{{ storeInfo.name || '自提门店' }}</view>
              <!-- <view class="phone">{{ addressInfo.phone }}</view> -->
            </view>
            <view class="item-bottom">
              {{ storeInfo.address || '请选择自提门店' }}
            </view>
          </view>
          <u-icon name="arrow-right" :size="40" color="#CCCCCC"></u-icon>
        </view>
      </template>

      <!-- 订单列表 -->
      <view class="order-list">
        <view class="order-item">
          <view class="order-item-in">
            <view class="order-goods" v-for="item in list" :key="item.id">
              <image class="goods-image" :src="item.imgUrl" mode="aspectFit"></image>
              <view class="goods-right">
                <view class="goods-title">{{ item.name }}</view>
                <view class="goods-tags">
                  <template v-if="item.tags">
                    <text v-for="(tag, index) in item.tags.split('|')">{{ tag }}</text>
                  </template>
                </view>
                <view class="goods-bottom">
                  <view class="price">{{ item.price }}</view>
                  <view class="count">x {{ item.num }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- <view class="delAdRem">
          <view class="left">快递方式</view>
          <view class="right">普通快递</view>
        </view>
        <view class="delAdRem">
          <view class="left">发货时间</view>
          <view class="right">7个工作日内</view>
        </view> -->
      </view>

      <view class="section">
        <view class="delAdRem">
          <view class="left">商品金额</view>
          <view class="right colorRed">￥141.00</view>
        </view>
        <view class="delAdRem">
          <view class="left">快递配送</view>
          <view class="right">不包邮</view>
        </view>
        <view class="delAdRem">
          <view class="left">积分抵扣<text>可用积分 685</text></view>
          <view class="right"
            ><u-input v-model="point" placeholder="请输入"></u-input
          ></view>
        </view>
        <view class="delAdRem" @click="showPicker = true">
          <view class="left">钱包抵扣</view>
          <view class="right"
            >分润钱包余额:3233.21
            <u-icon name="arrow-right" :size="28" color="#CCCCCC"></u-icon>
          </view>
        </view>
        <view class="delAdRem">
          <view class="left">积分抵扣</view>
          <view class="right"
            ><u-input v-model="point" placeholder="请输入"></u-input
          ></view>
        </view>
      </view>
    </view>

    <!-- 结算 -->
    <!-- 结算 -->
    <view class="settlement">
      <view class="settlement-in">
        <!-- <text class="num">共{{ totalNum }}件</text> -->
        <view class="left">
          <text>抵扣</text>
          <text class="price"> ￥{{ totalAmount || 0 }} </text>

          <text class="ml10">支付</text>
          <text class="price"> ￥{{ totalAmount || 0 }} </text>
        </view>
        <view class="btn" @click="confirm()">确认申领</view>
      </view>
    </view>

    <u-popup v-model="showPopup" mode="center" border-radius="10" width="80%" closeable>
      <view class="popup-content">
        <view class="title">取货人联系方式</view>
        <view class="form">
          <u-input
            class="input"
            type="text"
            v-model="pickerModel.name"
            placeholder="请输入取货人姓名"
          >
          </u-input>
          <u-gap height="30" bg-color="#ffffff"></u-gap>

          <u-input
            class="input"
            type="number"
            v-model="pickerModel.phone"
            placeholder="请输入取货人手机号"
          >
          </u-input>
        </view>
        <u-gap height="40" bg-color="#ffffff"></u-gap>

        <view class="btn" @click="popupSure">确认</view>
      </view>
    </u-popup>

    <u-picker
      v-model="showPicker"
      mode="selector"
      :range="selector"
      title='钱包抵扣'
      @confirm="pickerConfirm"
    ></u-picker>
  </view>
</template>
<script>
import service from '@/common/service.js';
import { showToast } from '@/common/utils.js';
export default {
  data() {
    return {
      type: 0,
      addressInfo: {
        isDefault: true,
        name: '张三三',
        phone: '18888888888',
        province: '福建省',
        city: '福州市',
        address: '台江区鳌峰街道万科金融港2-511',
      },
      storeInfo: {},
      info: {},
      num: 0,
      tradeId: null,
      payType: '0',
      list: [],
      totalNum: 0,
      totalPoint: 0,
      confirmFlag: false,
      deliveryType: 0,
      exchangeMethod: {},
      showPopup: false,
      pickerModel: {
        name: '',
        phone: '',
      },
      list: [
        {
          id: 0,
          name: '汇来米智能机',
          tags: '扫码类|平台兑换|联动优势',
          imgUrl: '/static/images/logo.png',
          price: '¥120.00',
          num: 1,
        },
        {
          id: 1,
          name: '汇来米智能机1',
          tags: '扫码类|平台兑换|联动优势',
          imgUrl: '/static/images/logo.png',
          price: '¥122.00',
          num: 2,
        },
      ],
      point: '',
      showPicker: false,
      selector: ['不抵扣', '分润钱包余额:2384.38元', '返现钱包月:1060 元'],
    };
  },
  onLoad(options) {
    try {
      this.type = Number(options.type);
      let list = JSON.parse(options.list);
      let exchangeMethod = JSON.parse(options.exchangeMethod);
      let totalNum = 0,
        totalPoint = 0;
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        totalNum += item.num;
        totalPoint += item.num * parseInt(item.integral);
      }
      this.list = list;
      this.exchangeMethod = exchangeMethod;
      this.totalNum = totalNum;
      this.totalPoint = totalPoint;
    } catch (error) {
      console.error('解析购物车数据失败');
    }
    this.getDefaultAddress();
  },
  onShow() {
    const _this = this;
    uni.$on('addressData', (rel) => {
      _this.addressInfo = rel.addressInfo;
    });
    uni.$on('storeData', (rel) => {
      _this.storeInfo = rel.storeInfo;
    });
  },
  computed: {
    // totalPrice() {
    //   return this.num * this.info.price;
    // },
  },
  methods: {
    pickerConfirm(value) {},
    getDefaultAddress() {
      const that = this;
      service.getDefaultAddress(
        {},
        function (res) {
          if (res && res.data) {
            that.addressInfo = res.data;
          }
        },
        function (res) {}
      );
    },
    handleChooseAddr() {
      uni.navigateTo({
        url: '/pages/address/chooseAddress',
      });
    },
    handleChooseStore() {
      uni.navigateTo({
        url: '/pages/purchase/chooseStore',
      });
    },
    deliveryTypeChange(value) {
      this.deliveryType = value;
    },
    popupSure() {
      this.showPopup = false;
    },
    confirm() {
      const that = this;
      if (this.deliveryType === 0 && !that.addressInfo.id) {
        showToast('请先选择收货地址');
        return;
      }
      if (this.deliveryType === 1) {
        if (!that.pickerModel.name || !that.pickerModel.phone) {
          showToast('请先添加取货人信息');
          return;
        }
        if (!that.storeInfo.id) {
          showToast('请先选择自提门店');
          return;
        }
      }

      if (that.confirmFlag) {
        return;
      }
      that.confirmFlag = true;
      uni.showLoading({
        title: '正在兑换',
      });
      if (this.type == 0) {
        let products = [];
        for (let i = 0; i < this.list.length; i++) {
          let item = this.list[i];
          let newItem = {
            productId: item.productId,
            num: item.num,
          };
          products.push(newItem);
        }

        const params = {
          totalAmount: that.totalPoint,
          addressId: that.addressInfo.id,
          products: products,
          deliveryType: that.deliveryType,
          contact: `${that.pickerModel.name} ${that.pickerModel.phone}`,
          wareHouseId: that.storeInfo.id,
          isPlat: that.exchangeMethod.isPlat,
          phone: that.exchangeMethod.phone || '',
        };
        service.postExchange(
          params,
          function (res) {
            that.confirmFlag = false;
            uni.hideLoading();
            if (res.data && res.status === 1) {
              showToast('兑换成功');
              uni.navigateTo({
                url: '/pages/my/order?from=my&tab=1',
              });
            } else {
              showToast(res.message);
            }
          },
          function (res) {
            uni.hideLoading();
            showToast(res.message);
          }
        );
      } else {
        let productId = [];
        for (let i = 0; i < this.list.length; i++) {
          let item = this.list[i];
          productId.push(item.productId);
        }

        const params = {
          id: productId[0],
          num: that.totalNum,
          totalIntegral: that.totalPoint,
        };
        service.postExchangeMoney(
          params,
          function (res) {
            that.confirmFlag = false;
            uni.hideLoading();
            if (res.data && res.status === 1) {
              showToast('兑换成功');
              uni.navigateTo({
                url: '/pages/my/order?from=my&tab=1',
              });
            } else {
              showToast(res.message);
            }
          },
          function () {
            that.confirmFlag = false;
            uni.hideLoading();
            showToast(res.message);
          }
        );
      }
    },
    handlePayNow() {
      const that = this;
      if (this.payType == '0') {
        uni.login({
          success: function (result) {
            if (result.code) {
              const params = {
                code: result.code,
                tradeId: that.tradeId,
              };
              service.wxPay(
                params,
                function (res) {
                  if (res && res.status === 1) {
                    uni.requestPayment({
                      timeStamp: res.data.timeStamp,
                      nonceStr: res.data.nonceStr,
                      package: res.data.package,
                      signType: res.data.signType,
                      paySign: res.data.paySign,
                      success: function (res) {
                        showToast('支付成功，即将跳转');
                        setTimeout(() => {
                          uni.navigateTo({
                            url: '/pages/my/order?from=starMall&tab=2',
                          });
                        }, 1500);
                      },
                      fail: function (res) {
                        showToast('支付失败');
                      },
                    });
                  }
                },
                function () {}
              );
            } else {
              showToast('支付失败');
              return;
            }
          },
        });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.container {
  width: 100%;
  min-height: 100vh;
  padding: 0 0 120rpx;
  text-align: center;
  background-color: #f5f5f5;
}

.confirmOrder-wrap {
  width: 100%;
  padding: 30rpx 30rpx;

  .address {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 24rpx;
    width: 100%;
    background-color: #fff;
    border-radius: 10rpx;

    .methodIcon {
      width: 32rpx;
      height: 32rpx;
    }

    .addressIcon {
      width: 26rpx;
      height: 32rpx;
    }
    .center {
      flex: 1;
      padding: 0 20rpx;

      .item-top {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-end;
        font-weight: bold;
        font-size: 34rpx;

        .tag {
          margin-right: 15rpx;
          width: 54rpx;
          height: 26rpx;
          line-height: 26rpx;
          background: #fff7e5;
          border-radius: 4rpx;
          font-size: 22rpx;
          font-weight: 400;
          color: #cc921f;
        }

        .name {
          font-size: 28rpx;
          color: #2f2f2f;
          line-height: 1;
        }

        .phone {
          margin-left: 20rpx;
          font-size: 24rpx;
          color: #2f2f2f;
          line-height: 1;
        }
      }

      .item-bottom {
        display: flex;
        margin-top: 20rpx;
        font-size: 24rpx;
        line-height: 1.5;
        justify-content: space-between;
        color: #999999;
        text-align: left;
      }
    }
  }
}

.mt30 {
  margin-top: 30rpx;
}

.order-list {
  margin-top: 30rpx;
  width: 100%;
  background-color: transparent;

  .order-item {
    width: 100%;
    background-color: #fff;
    border-radius: 10rpx;

    .order-item-in {
      width: 100%;
      padding: 30rpx;
      overflow: hidden;

      .order-item-header {
        float: left;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        width: 100%;

        .header-title {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;

          image {
            width: 32rpx;
          }

          text {
            margin-left: 10rpx;
            font-size: 26rpx;
            font-weight: bold;
            color: #000000;
            line-height: 1;
          }
        }
      }

      .order-goods {
        float: left;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 25rpx 0;

        .goods-image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 10rpx;
          overflow: hidden;
        }

        .goods-right {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          padding: 0 20rpx;

          .goods-title {
            font-size: 26rpx;
            font-weight: bold;
            color: #333;
            line-height: 1.5;
            text-align: left;
          }

          .goods-tags {
            margin-top: 18rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            text {
              margin-right: 8rpx;
              display: inline-block;
              height: 28rpx;
              padding: 0 7rpx;
              font-weight: 500;
              font-size: 22rpx;
              color: #b7926e;
              line-height: 28rpx;
              background: #fff2e5;
              border-radius: 6rpx;
              border: 1px solid #b7926e;
            }
          }

          .goods-bottom {
            margin-top: 20rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            line-height: 1;
            .price {
              font-weight: 800;
              font-size: 28rpx;
              color: #e52e2e;
            }

            .count {
              font-weight: bold;
              font-size: 26rpx;
              color: #222222;
            }
          }
        }
      }

      .order-item-footer {
        float: left;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        width: 100%;

        .footer-price {
          margin-top: 30rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #222222;

          .total {
            margin-right: 10rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
            line-height: 1;
          }

          .unit {
            line-height: 1;
            font-size: 24rpx;
            font-weight: normal;
            color: #ff0303;
          }

          .num {
            line-height: 1;
            font-size: 36rpx;
            font-weight: normal;
            color: #ff0303;
          }
        }
      }
    }
  }

  .anonymous {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 25rpx;
    width: 100%;
  }
}

.delAdRem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 25rpx 0;
  line-height: 1;
  background-color: #fff;

  .left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
    text-align: left;

    text {
      margin-left: 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
    }
  }

  .right {
    flex: 1;
    padding-left: 40rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #222222;
    text-align: right;

    /deep/ .u-input__input {
      font-size: 28rpx;
    }
  }
  .colorRed {
    color: #f73736;
  }
}

.section {
  margin-top: 30rpx;
  padding: 10rpx 30rpx 0;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.settlement {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10rpx 30rpx 60rpx;
  line-height: 1;
  background-color: #ffffff;

  .settlement-in {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;

    .left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      font-size: 28rpx;
      color: #333333;
      .num {
        margin-right: 10rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
      }

      .price {
        color: #e52e2e;
        font-weight: bold;
      }
    }

    .btn {
      width: 200rpx;
      height: 74rpx;
      line-height: 74rpx;
      font-size: 26rpx;
      font-weight: normal;
      color: #fff;
      text-align: center;
      background: linear-gradient(90deg, #332108, #201403);
      border-radius: 12rpx;
    }
  }
}
.pay-wrap {
  width: 100%;
  padding: 150rpx 30rpx 90rpx;

  .pay-wrap-content {
    width: 100%;

    .pay-money {
      width: 100%;
      padding: 0 0 25rpx;
      font-size: 72rpx;
      font-weight: bold;
      color: #333333;
      line-height: 1;
      border-bottom: 2px dotted #eeeeee;

      text {
        font-size: 48rpx;
        font-weight: bold;
        color: #333333;
        line-height: 1;
      }
    }

    .pay-way {
      margin-top: 50rpx;
      width: 100%;

      .pay-way-title {
        margin-bottom: 30rpx;
        width: 100%;
        font-size: 30rpx;
        font-weight: normal;
        color: #898989;
        line-height: 1;
        text-align: left;
      }

      .pay-way-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 20rpx 0;

        .left {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;

          image {
            width: 49rpx;
          }

          .info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            margin-left: 30rpx;

            .info_title {
              font-size: 30rpx;
              font-weight: normal;
              color: #2d2d2d;
              line-height: 1;
            }

            .info_subTitle {
              margin-top: 5rpx;
              font-size: 18rpx;
              font-weight: normal;
              color: #999999;
              line-height: 1;
            }
          }
        }
      }
    }
  }

  .pay-btn {
    margin-top: 70rpx;
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 30rpx;
    font-weight: normal;
    color: #f1f1f1;
    text-align: center;
    background: linear-gradient(90deg, #22242e, #434759);
    border-radius: 10rpx;
  }
}

.popup-content {
  position: relative;
  width: 100%;
  padding: 50rpx 40rpx;
  background-color: #ffffff;
  .title {
    width: 100%;
    font-size: 32rpx;
    font-weight: bold;
    color: #222222;
    line-height: 1;
    text-align: center;
  }
  .form {
    margin-top: 40rpx;
    width: 100%;
    .label {
      width: 100%;
      padding: 0 40px;
      font-size: 28rpx;
      font-weight: normal;
      color: #222222;
      line-height: 1;
      text-align: left;
    }
    .input {
      width: 100%;
      height: 80rpx;
      ::v-deep .u-input__input {
        width: 100%;
        height: 80rpx;
        padding: 0 20rpx;
        text-align: center;
        background: #f5f5f5;
        border-radius: 10rpx;
      }
    }
  }
  .btn {
    margin: 0 auto;
    width: 200rpx;
    height: 72rpx;
    line-height: 72rpx;
    font-size: 28rpx;
    font-weight: normal;
    color: #cc921f;
    background: linear-gradient(90deg, #f1cc82, #ffdd99);
    border-radius: 10rpx;
    text-align: center;
  }
}

.ml10 {
  margin-left: 10rpx !important;
}
</style>
